<template>
    <div>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">订单信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="8">
                    发货单号：<span>{{orderInfo.deliveryList.id}}</span>
                </el-col>
                <el-col :span="8">
                    供应商名称：<span>{{orderInfo.deliveryList.sellerName}}</span>
                </el-col>
                <el-col :span="8">
                    起运港：<span>{{orderInfo.deliveryList.startHarborName}}</span>
                </el-col>
                <el-col :span="8">
                    目的地：<span>{{orderInfo.deliveryList.endHarborName}}</span>
                </el-col>
                <el-col :span="8">
                    订单号：<span>{{orderInfo.deliveryList.orderId}}</span>
                </el-col>
            </el-row>
        </c-template>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">出口车辆基本信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="orderInfo.carList" v-loading="loading">
                        <el-table-column label="序号" width="80" align="center" type="index" />
                        <el-table-column width="" label="车辆信息" align="center" prop="carInfo">
                            <template slot-scope="scope">
                                {{scope.row.brand}}-{{scope.row.series}}-{{scope.row.model}}
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="单价" align="center" prop="price" />
                        <el-table-column width="" label="车架号" align="center" prop="vin" />
                    </el-table>
                </el-col>
            </el-row>
        </c-template>
        <c-template class="tf-paragraph" v-if="!approvalShow">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">审批意见</el-col>
            </el-row>
            <el-divider></el-divider>
            <c-approval-process :id="id" @isHide="hideApproval" :status="orderInfo.deliveryList.status" @isLoading="changeLoading" :isView="isView" ref="approvalProcess"></c-approval-process>
        </c-template>
    </div>
</template>
<script>
import cApprovalProcess from './components/c-approval-process.vue';
export default {
    components: {
        cApprovalProcess
    },
    data () {
        return {
            id: "",
            isView: true,
            loading: false,
            orderInfo: {
                deliveryList: {}
            },
            approvalShow: false
        };
    },
    mounted () {
        this.getInfo()
    },
    methods: {
        hideApproval (isHide) {
            this.approvalShow = isHide
        },
        changeLoading (loading) {
            this.isView = true
            this.loading = loading
        },
        async getInfo () {
            if (this.$route.query.id) {
                this.isView = eval(this.$route.query.isView)
                this.id = this.$route.query.id
                const params = {
                    id: this.$route.query.id,
                };
                this.loading = true;
                let res = await this.$get({ url: "/sellerDeliveryList/getById", params })
                this.orderInfo = res
                this.loading = false;
                this.$refs.approvalProcess.getFlowsList()
            }
        },
    },
};
</script>
<style scoped lang="scss">
.imgList {
    display: flex;
    .el-image {
        width: 30%;
        margin: 0 auto;
    }
}
</style>